<template>
  <div class="qualityContrastMini" v-loading="loading">
    <div class="qualityAnalysisSearch">
      <div class="mindRadioGroup">
        <span class="mindRadio" v-for="item in timeSearchList" :key="item.value" :class="{ active: item.value === qualityAnalysisSearch }" @click="qualityAnalysisChange(item.value)">{{item.label}}</span>
      </div>
      <el-select v-model="qualityAnalysisStation" placeholder="为空则表示所有水站" size="mini" class="select" :clearable="true" @change="qualityStationChange">
        <p v-for="(item, index) of stationList" :key="index">
          <el-option :label="item" :value="item" se></el-option>
        </p>
      </el-select>
      <timePickerMini style="display: block" :range="qualityAnalysisSearch" :change="qualityAnalysisChange" />

    </div>
    <div class="rank">
      <div class="card">
        <div class="cardTit">
          <span>水质变化情况分析图</span>
        </div>
        <div class="chartBox"><charts :option="situationAnalysisLine"/></div>
      </div>
      <div class="card">
        <div class="cardTit">
          <span>污染因子变化分析表</span>
        </div>
        <div class="cardTable">
          <el-table :data="qualityContrastTable" size="small" border
            :header-cell-style="{color: '#292929', backgroundColor: '#f1f1f1', borderTop: '1px solid #EBEEF5'}"
          >
            <el-table-column
              prop="station"
              label="水站名称"
              align="center">
            </el-table-column>
            <el-table-column
              prop="improveFactor"
              label="污染改善因子"
              align="center">
              <template slot-scope="scope">
                {{scope.row.improveFactor || '-'}}
              </template>
            </el-table-column>
            <el-table-column
              prop="increaseFactor"
              label="污染加重因子"
              align="center">
              <template slot-scope="scope">
                {{scope.row.increaseFactor || '-'}}
              </template>
            </el-table-column>
            <el-table-column
              prop="stableFactor"
              label="稳定达标因子"
              align="center">
              <template slot-scope="scope">
                {{scope.row.stableFactor || '-'}}
              </template>
            </el-table-column>
            <el-table-column
              prop="overFactor"
              label="稳定超标因子"
              align="center">
              <template slot-scope="scope">
                {{scope.row.overFactor || '-'}}
              </template>
            </el-table-column>
            
          </el-table>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex"
import charts from '../components/charts.vue'
import timePickerMini from '../components/timePickerMini.vue'
import common from "../plugins/common.js";
import standard from "../plugins/standard.js";
export default {
  name: "qualityContrastMini",
  props: ['isShow'],
  components: {
    charts, timePickerMini
  },
  data() {
    return {
      common,
      loading: false,
      qualityAnalysisSearch: "259200000",
      timeSearchList: [
        { label: "近三天", value: "259200000" },
        { label: "近一周", value: "604800000" },
        { label: "近一个月", value: "2592000000" },
      ],
      qualityAnalysisStation: "",
      situationAnalysisLine: {},
    }
  },
  computed: {
    ...mapGetters({
      stationList: 'getStationList',
      qualityContrastLine: 'getQualityContrastLine',
      qualityContrastTable: 'getQualityContrastTable',
      times: 'getTimes'
    })
  },
  methods: {
    ...mapActions([
      'fetchQualityContrast'
    ]),
    qualityStationChange(val) { //水站筛选变化
      this.qualityAnalysisStation = val
      this.postQualityContrast()
    },
    qualityAnalysisChange(val) { //水环境质量分析 时间段筛选变化
      this.qualityAnalysisSearch = val
      setTimeout(() => {
        this.postQualityContrast()
      })
    },
    async postQualityContrast() {
      this.loading = true
      const result = await this.fetchQualityContrast({
        station: this.qualityAnalysisStation,
        startTime: this.times.startTime + " 00:00:00",
        endTime: this.times.endTime + " 00:00:00",
      })
      if(typeof result === "string") {
        this.$notify({
          type: 'warning',
          title: '提示',
          message: result,
        })
      }
      let xAxisType
      if(this.qualityContrastLine.length) {
        xAxisType = this.qualityContrastLine[0].type === '0' ?  '日期' : '时间/d'
      }else {
        xAxisType = ''
      }
      this.situationAnalysisLine = {
        color: ['#615df5'],
        grid: {
          top: 40,
          left: 30,
          right: 60,
          bottom: 40
        },
        xAxis: {
          type: 'category',
          name: xAxisType,
          data: this.qualityContrastLine.map(v => v.time.replace(/ /, "\n")),
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          name: '污染指数',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{b}: 污染指数为 {c}'
        },
        visualMap: {
          show: false,
          pieces: [
            { max: 1, min: 0, color: '#615df5' }
          ],
          outOfRange: {
            color: '#ff343e'
          }
        },
        series: 
          {
            name: this.qualityAnalysisStation,
            data: this.qualityContrastLine.map(v => v.result),
            type: 'line',
            smooth: true,
             markLine: {
              symbol: ['none'],
              label: {
                formatter: '{b}: {c}',
                // position: "start"
              },
              lineStyle: {
                color: '#e86464'
              },
              data: [
                { yAxis: standard.pollutionIndex, name: '超标线' }
              ]
            },
          },
      }
      this.loading = false
    }
  },
  created() {
    this.qualityAnalysisChange(this.qualityAnalysisSearch);
  },
  watch: {
    isShow(newVal) {
      if(newVal) this.qualityAnalysisChange(this.qualityAnalysisSearch);
    }
  }
}
</script>

<style scoped>
.qualityContrastMini {
}
.rank {
  width: 100%;
  height: 100%;
}

.qualityContrastMini .title {
  line-height: 40px;
  font-size: 14px;
  color: #0063ed;
}
.qualityContrastMini .qualityAnalysisSearch {
  padding-bottom: 12px;
}
.qualityContrastMini .card {
  padding: 8px 8px 0;
  margin-bottom: 8px;
  box-shadow: 1px 1px 5px 0px rgba(75, 75, 75, 0.2);
  background-color: #fff;
  overflow: hidden;
}
.card .cardTit {
  position: relative;
  padding-left: 8px;
  font-size: 12px;
  line-height: 28px;
  color: #535353;
}
.card .cardTit::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 16px;
  background: #0063ed;
  top: 50%;
  margin-top: -8px;
  left: 0;
}
.card .chartBox {
  width: 100%;
  height: 200px;
}
.cardTable {
  margin-bottom: 8px;
}

.mindRadioGroup {
  display: inline-block;
  height: 28px;
  line-height: 28px;
  vertical-align: middle;
  margin-right: 12px;
}
.mindRadio {
  box-sizing: border-box;
  padding: 2px 10px;
  border: 1px solid;
  border-color: transparent;
  margin-right: 10px;
  border-radius: 12px;
  transition: .25s ease;
  cursor: pointer;
  font-size: 12px;
}
.mindRadio:hover {
  color: #54b1fd;
}
.mindRadio.active {
  color: #54b1fd;
  border-color: #54b1fd;
}
</style>